import React, { Suspense, useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Row, Col, Typography, message } from 'antd';
import DatasetStat, { StatItem } from './components/DatasetStat';

import { getUsageDetails } from './service';

const { Title } = Typography;

const convertToCN = (en: string) => {
  const titles = [
    { label: '计算机视觉', value: 'cv' },
    { label: '语音', value: 'speech' },
    { label: '推荐', value: 'recommend' },
    { label: '多模态', value: 'multimodal' },
    { label: 'NLP', value: 'nlp' },
  ];

  const item = titles.find(t => t.value === en);

  return item?.label || en;
}

const Dashboard: React.FC = () => {
  const [unstructured, setUnstructured] = useState<StatItem[]>([]);
  const [structured, setStructured] = useState<StatItem[]>([]);

  const getDsDetails = async () => {
    const { code, data, msg } = await getUsageDetails() || {};

    if (code === 0) {
      const items = [];

      for (const [key, value] of Object.entries(data)) {
        if (key !== 'total') {
          items.push({ type: convertToCN(key), value: parseInt(value + '', 10) || 0 });
        }
      }

      setUnstructured(items);
    } else {
      message.error(`获取总览数据错误：${msg}`);
    }
  }

  useEffect(() => {
    getDsDetails();
  }, [])

  return (
    <PageContainer>
      <Row
        gutter={24}
        style={{
          marginTop: 24,
        }}
      >
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              title="结构化数据"
              style={{
                height: '100%',
              }}
            >
              <Title level={5}>数据集仓库</Title>
              <DatasetStat data={structured} />
            </Card>
          </Suspense>
        </Col>
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              title="非结构化数据"
              style={{
                height: '100%',
              }}
            >
              <Title level={5}>数据集仓库</Title>
              <DatasetStat data={unstructured} />
            </Card>
          </Suspense>
        </Col>
      </Row>
    </PageContainer>
  )
}

export default Dashboard;